import GraphBack from '../../src'
function draw() {
  document.querySelectorAll('.graph-background').forEach((ele) => drawBackground(ele))
}
window.addEventListener('resize', () => draw())

function drawBackground(ele) {
  const board = new GraphBack.Board(ele, { create: true, color: '#235fa7', shadowColor: '#235fa7' })
  const paths = [
    '6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63',
    '27.6,4.8 38.4,4.8 35.4,7.8 30.6,7.8',
    '9,54 9,63 7.2,66 7.2,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54'
  ]
  for (let i = 0; i < paths.length; i++) {
    const points = paths[i].split(' ').map((item) => item.split(','))
    const polygon = new GraphBack.Polygon({ points })
    const transform = new GraphBack.Transform(polygon).mirror('x', board.width / 2, 0).mirror('y', 0, board.height / 2)
    board.add(transform)
  }
  board.render()
}
